<!DOCTYPE html>
<html lang='en'>

<head>
  <title>扫雷</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./css/mineSweeper.css">
  <link rel="stylesheet" type="text/css" href="./font/font-awesome/css/font-awesome.min.css">
</head>

<body>
  <div class="panel">
    <span>
      <p><i class='fa fa-bomb' style="font-size: 1.6rem"></i>&nbsp;数</p>
      <span id="mine-sum">--</span>
    </span>
    <span>
      <p>旗子数</p>
    <span id="flag-num">--</span>
    </span>
    <span>
      <p>用时</p>
      <span id="timer">--</span>
    </span>
  </div>
  <div id='container'>
    <div class="start mask">
      <div class="banner">
        <i class="fa fa-sun-o fa-spin"></i>
      </div>
      <div id='start-btn' class="btn">开始游戏</div>
    </div>
    <div class="game-over mask">
      <div class="banner">
        <i class="fa fa-bomb"></i>
      </div>
      <div id='restart-btn' class="btn">Game Over</div>
    </div>
    <div class="congratulate mask">
      <div class="banner">
        <i class="fa fa-sun-o fa-spin"></i>
      </div>
      <div id='congratulate-btn' class="btn">恭喜通关</div>
    </div>
  </div>
  <script type="text/javascript" src='./js/mineSweeper.js'></script>
</body>

</html>